<!--
 * @FilePath     : /study_code/css/overflow1.html
 * @Description  : 自定义滚动条样式
 * @Date         : 2025-04-27 11:03:20
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-27 11:05:50
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
    <style>
      /* 滚动条样式 */
      /* 容器尺寸 */
      .box {
        width: 100%;
        height: 400px;
        overflow: auto;
        overflow-x: hidden;
      }

      /* 滚动条样式 */
      /* 滚动条尺寸 */
      .box::-webkit-scrollbar {
        width: 8px;
      }

      /* 滚动条背景样式 */
      .box::-webkit-scrollbar-track {
        background-color: #133c6b;
        /* 尺寸为2em——比率值 */
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
      }

      /* 滚动条按钮样式 */
      .box::-webkit-scrollbar-thumb {
        background-color: #2b55c0;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
      }
    </style>
  </head>
  <body style="overflow: hidden;">
    <div class="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus sed doloribus quo nisi cum
      saepe dolorum repellat doloremque, ea rerum tenetur voluptatum asperiores? Ex dolor facilis
      dolorem quidem aliquam sapiente maxime dicta consectetur, optio nisi rerum, possimus atque
      fuga repellat voluptatem ullam! Doloribus voluptas, necessitatibus rem distinctio, esse ad
      ipsa sint quam facere alias itaque tempora aperiam amet maiores nisi delectus aliquam rerum!
      Magni id voluptatibus dolores repellendus numquam sed mollitia voluptate dolore provident
      earum. Ratione at voluptatem delectus aut velit fuga, natus laborum sint dolor cupiditate
      quidem iure nam ea neque molestias magnam nulla reiciendis illo assumenda veniam amet deserunt
      saepe. Sapiente suscipit neque maiores quos ipsa accusamus aut aspernatur recusandae harum
      laborum voluptatibus asperiores, odit iste blanditiis deleniti. Molestiae saepe ratione,
      repudiandae aperiam a earum mollitia placeat laudantium perspiciatis vero minus quo corporis
      voluptate animi consequuntur illum commodi beatae? Distinctio architecto quas itaque atque
      iusto totam quo doloribus reprehenderit vitae repellendus, exercitationem at illo voluptatibus
      sunt ipsum alias repudiandae iure sit aliquam perferendis! Numquam quos officiis obcaecati?
      Harum soluta cum fuga dolorem recusandae voluptatibus, iste commodi vitae sunt enim, ex
      necessitatibus magni eos illum veniam nemo dolor officiis ratione. Magnam corrupti tempore
      cumque, culpa repellat nulla! Suscipit culpa magni labore porro cumque pariatur. Perferendis
      quod, repellat eveniet at sed excepturi rerum. Esse, animi quisquam mollitia ipsam eos
      sapiente necessitatibus aspernatur. Eveniet culpa doloremque minima blanditiis dolorum ducimus
      facilis rerum mollitia a, laboriosam, et ex rem at amet. Ea sunt delectus neque blanditiis,
      molestiae fugiat nostrum adipisci similique nam rerum vitae tempore sit ab sapiente iste nobis
      tenetur cum aliquid illo! Enim laudantium rem distinctio minima hic culpa accusamus, nobis
      quisquam, tempora, ipsum repellat amet ea! Ex, ratione? Fugiat unde dolor quo aliquid quas
      illo illum molestias perferendis ex reprehenderit. Cum fugit culpa aut voluptate saepe
      mollitia eos ipsum incidunt unde optio itaque, dolores corporis dicta ratione neque aliquid
      exercitationem atque tempore ullam natus animi ducimus perferendis vero. Provident molestiae
      ipsum voluptas possimus suscipit eius sed excepturi rem doloribus est, veniam amet commodi
      nulla blanditiis pariatur exercitationem ducimus recusandae ipsam quia temporibus aliquid
      magni? Nihil repudiandae iste autem, sit doloribus harum cumque ea corporis similique optio
      enim aliquam mollitia id officia, dolor delectus, cum accusamus et! Dignissimos magnam earum
      cupiditate, eveniet, vitae amet nihil quas deleniti delectus nisi dolor officiis
      exercitationem illum reiciendis deserunt itaque facilis id veniam laudantium voluptatibus a
      quae vero? Tempora molestias maiores voluptatem atque commodi! Laborum id voluptatem fugit
      nulla quos ratione aliquid hic iste quasi eligendi inventore amet, qui fugiat, velit
      praesentium expedita numquam dicta odit? Amet excepturi aliquid ducimus optio ad quo, rerum
      similique, ea numquam, voluptatibus quia repellat inventore doloremque iusto commodi soluta?
      Eligendi quas aperiam autem, architecto amet quo illum fugiat et debitis. Sapiente cum sequi a
      enim voluptates. Quas eaque veritatis repudiandae expedita a nam molestias magni tempora
      veniam! Repudiandae, ad id cumque sint molestias sit corporis vero. Molestias laudantium
      laboriosam sed quidem natus neque harum nam, numquam labore porro alias facere quo nihil optio
      quia illo magni aliquam voluptatibus explicabo ipsa, doloremque et nisi. Asperiores aut eaque
      dignissimos aspernatur expedita deserunt quas placeat vero nemo quidem numquam a dolorum modi
      quasi enim laudantium facilis fugit quibusdam molestiae earum sint, consequatur dolorem maxime
      neque. Corrupti repudiandae quidem pariatur dolore dignissimos dolor, non quod, quis nisi in
      placeat? Ipsam, perferendis porro ut tempora laudantium, nam praesentium recusandae aliquam
      nisi minima odit eos. Reprehenderit, iste doloribus nesciunt quaerat sunt aliquam ad? Itaque
      natus dolore veritatis labore similique ut eligendi incidunt facere magnam autem, quidem,
      consectetur pariatur soluta voluptas, et dolorem officia. Architecto deleniti eveniet ab!
      Iusto natus voluptatum totam, ducimus exercitationem ut? Eligendi amet tempore placeat.
      Eveniet sequi, earum rem ab cum aliquam veritatis fugiat voluptatibus minus. Sapiente
      reprehenderit saepe amet sequi tempore itaque quos aspernatur, eveniet modi quaerat obcaecati
      culpa eum aliquid mollitia quidem praesentium perspiciatis delectus qui totam, hic nam
      recusandae voluptatem? Nobis, dignissimos sapiente aliquam dolores quasi labore ducimus non
      iure nulla quam neque rem reiciendis voluptates necessitatibus numquam accusamus quia itaque
      culpa praesentium nemo vero? Ipsa iste unde enim, velit modi quia. Minus esse magni quam hic
      iure. Delectus eligendi, ex impedit quos laboriosam est omnis commodi veritatis, accusamus
      ipsam ratione? Magni repellendus, recusandae est officia et temporibus fuga cumque, labore, in
      enim facilis rem dignissimos facere suscipit! Molestiae sapiente dolorem tenetur animi
      laboriosam itaque reprehenderit earum reiciendis, sunt dolor qui maiores exercitationem
      deserunt cumque fuga aut quidem explicabo ducimus ipsam praesentium! Consequatur tempore ipsum
      delectus, eligendi at, ratione reiciendis voluptatem fugiat dicta optio sed officiis nisi iure
      corrupti placeat natus distinctio earum nam praesentium. Molestias nostrum, corrupti eveniet
      alias nobis omnis similique harum perspiciatis vitae optio molestiae ipsa quam doloribus ipsum
      ducimus temporibus voluptatibus. Qui deleniti minus molestias sit hic itaque impedit harum
      aspernatur. Quo repellendus fuga, minima officia neque delectus earum accusantium maiores
      reprehenderit ipsa, modi amet impedit nesciunt cum numquam illum, deleniti quae dolore ea
      magni sit. At nulla alias asperiores quas nesciunt atque voluptatem ad repudiandae odit,
      beatae voluptatum laboriosam veniam molestias, sint quae vitae error totam sed ut nemo illum?
      Officia reiciendis blanditiis exercitationem quisquam voluptatum odio, sint, animi ipsum
      ratione porro eum amet incidunt veritatis. Facere repudiandae temporibus consequatur alias,
      cupiditate similique aliquam minus minima deleniti ut, laudantium officiis at. Soluta
      consectetur, possimus dolorem omnis, ab mollitia voluptates velit placeat recusandae, quod
      veniam assumenda itaque suscipit ullam ducimus dolore nihil! Laboriosam repudiandae beatae
      quaerat ipsam eos, dolores at molestiae vitae in mollitia ipsum soluta accusantium excepturi
      amet, sed incidunt expedita, architecto qui! Eius doloribus dicta voluptatem eligendi nulla
      voluptatibus esse est quo recusandae, molestiae quibusdam quasi voluptate veritatis deleniti
      temporibus sint odit suscipit corrupti optio quidem ex accusantium incidunt corporis! Debitis
      pariatur fuga provident omnis fugiat. Nemo natus neque voluptatem, recusandae labore voluptate
      rem accusamus, tenetur dicta, deleniti hic voluptates aperiam vero distinctio ea! Obcaecati,
      eveniet blanditiis enim harum sit aut, nisi pariatur eaque, explicabo fugiat ea autem
      repudiandae itaque sapiente id deleniti nulla! Itaque, sunt magni non odio ab dolore fugiat
      fuga officiis veritatis magnam totam illum assumenda reprehenderit soluta optio nobis ad iste
      repellat vero. Ipsam libero magnam expedita vel consectetur reprehenderit eos voluptates et
      accusamus! Ratione eaque, praesentium non numquam tenetur cum tempore ut, aut atque quidem
      nobis saepe facilis, ipsa consequuntur a magnam assumenda recusandae amet hic laudantium
      molestias fugit voluptatibus! Ut architecto, ipsa quisquam exercitationem, impedit possimus
      ducimus nihil modi eius sapiente autem vitae perspiciatis rem sequi sit soluta nemo earum?
      Obcaecati at dolorem nobis, voluptatem corporis dicta deleniti sed harum reiciendis iste natus
      recusandae ab aliquid voluptatibus itaque officiis voluptate modi consectetur tempora debitis
      ipsa voluptatum illum enim! Ullam quidem voluptatem, sed vitae eligendi nostrum. Laudantium
      cupiditate quibusdam officiis, blanditiis similique ut obcaecati aspernatur a, saepe, eum
      sequi. Tempora aliquam voluptate repudiandae veniam quod cupiditate fuga ipsum. Labore
      excepturi sunt ea, hic corrupti similique atque dolorum doloribus suscipit molestiae modi
      explicabo architecto earum voluptates cum exercitationem soluta quod! Voluptas, enim ipsam
      explicabo adipisci similique, possimus exercitationem vel voluptatibus ipsa architecto
      accusantium maxime, mollitia cum consequuntur error esse quasi eos aut incidunt officia. Unde,
      repellat cupiditate incidunt vitae, quo, sapiente perspiciatis saepe perferendis maiores nam
      placeat reiciendis. Quidem odio mollitia, dolorum optio quo sunt error quam eveniet. Nulla sed
      ad tenetur, amet at id libero eaque, impedit esse aperiam quam minima illum hic quaerat
      incidunt repellat accusantium voluptatibus voluptates officiis distinctio velit aliquid?
      Accusantium facilis facere, quidem pariatur ipsam suscipit placeat! Non sit distinctio quos
      reprehenderit rem doloremque natus nemo itaque laudantium quisquam vero quaerat fugit unde nam
      enim totam, possimus hic accusamus odit asperiores labore iure ex, voluptatem modi. Vero in,
      dolores perspiciatis modi beatae consequuntur labore pariatur suscipit facilis aspernatur?
      Facere, accusantium fugiat labore ducimus atque quibusdam enim quidem, porro, aliquid eveniet
      illum harum? Numquam similique illum corporis minus nulla. Doloribus nam omnis voluptatem, at
      et sed molestias optio nulla laudantium rerum tempore repellendus quas iusto, ullam debitis
      dolor, consectetur officiis id autem aspernatur cum ex enim accusamus dolores! At minus sit
      soluta mollitia minima quidem provident non? Officiis porro dolores delectus, odit, adipisci
      tempore iusto fugit excepturi exercitationem debitis voluptates fugiat! Modi aliquid in neque
      distinctio ducimus vitae quos impedit officia alias libero unde praesentium repellendus amet
      incidunt aliquam, totam cumque perferendis placeat porro illum facere ad quas magni
      consequuntur! Sapiente saepe enim at reprehenderit! Voluptatibus cum perferendis sit
      exercitationem totam consequatur? Accusantium iste odio, et aliquam tempora dicta odit,
      ratione id velit minima in quas animi inventore temporibus vitae magni. Consequatur saepe
      repudiandae quis velit quia ab dicta quos voluptates ducimus. Est tenetur obcaecati iure ipsa
      officiis tempora commodi, quo, illo laudantium blanditiis error impedit repellat magni saepe
      cumque voluptates sequi quaerat nam reprehenderit dolore recusandae earum culpa vitae
      doloremque? Voluptatum, laudantium vel illo reprehenderit, culpa quis molestias quae ad quam
      totam assumenda voluptate perferendis aliquam dolorem quasi necessitatibus, dicta omnis saepe
      velit consectetur. In minus voluptates et saepe eum autem maxime officia facere, excepturi
      quaerat molestiae culpa voluptatem totam exercitationem consectetur, ipsa maiores accusantium
      qui! Labore iusto aperiam illo voluptatum deserunt provident quidem placeat quod maiores
      expedita. Tempore sequi amet alias quidem possimus quam, ducimus totam aliquid facilis harum
      doloribus excepturi omnis velit quisquam atque ullam error ad debitis, veniam odit. Nobis
      ducimus dignissimos reiciendis tenetur, laudantium vitae. Ullam illum eligendi quod at dolorum
      consectetur fugiat placeat ea assumenda provident laboriosam esse alias veritatis illo ipsa
      repudiandae, numquam vitae, tenetur mollitia qui aut blanditiis eum laudantium. Vel dicta
      eligendi excepturi maxime beatae cum nesciunt nostrum expedita soluta? Beatae eveniet
      recusandae dolores, sit labore nostrum necessitatibus sapiente voluptatum sequi id aliquam at
      tenetur odio ad alias molestiae. Deleniti, delectus error ex inventore dolorem dolor fugiat
      quae facere voluptates eveniet aliquid reprehenderit. Dignissimos vel at illum, aperiam saepe
      inventore neque possimus veniam earum et distinctio? Soluta officia ea deleniti! Quasi enim
      perspiciatis, impedit natus quibusdam debitis, in rem dolor tempora quos assumenda unde
      quisquam autem voluptatibus architecto ex eius similique, facilis error at facere ut cumque.
      Qui obcaecati inventore voluptates reprehenderit voluptas vel temporibus amet veritatis
      voluptatem, optio, esse, nihil doloremque. Laborum sunt aliquid explicabo iste enim, dicta
      fuga recusandae at impedit iusto unde dolorum saepe repellat, mollitia sed obcaecati,
      laudantium quibusdam amet nulla placeat magnam dolores. Harum sint, nobis numquam consequuntur
      quod rem! Nihil pariatur nobis ab officiis aut, consectetur id dolor magni culpa suscipit
      accusamus porro recusandae ex odit accusantium iusto quia maiores perspiciatis optio maxime
      ipsam ipsum! Soluta commodi pariatur architecto quidem corrupti ea cupiditate unde eaque saepe
      ad eius ducimus facilis accusamus, quam possimus sunt sapiente, labore aut repellendus iste
      tempora in doloremque, natus nesciunt! Cum minima perferendis cumque ex laboriosam, officiis
      quia! Ea voluptatibus sint recusandae fugit, impedit eaque dolor rerum, quod sapiente nesciunt
      ipsam iure molestias voluptatum, iusto consectetur ratione incidunt accusamus beatae dolorum
      quibusdam repudiandae nihil accusantium quaerat? Praesentium, modi? Nesciunt adipisci qui
      debitis soluta eaque obcaecati ipsa quaerat odio voluptatum ad recusandae nostrum animi quod,
      placeat ipsum eveniet, cumque magni vitae quae voluptate. Tenetur, veniam, similique vero
      eaque dolore laboriosam, fuga rerum nisi eius ratione placeat nulla corporis rem. Nemo eius
      aspernatur quaerat neque vitae incidunt non, aliquam nobis perspiciatis soluta quis est, et
      quo voluptatem necessitatibus, culpa quidem voluptas. Obcaecati, distinctio. Doloremque fuga
      saepe natus aperiam repellat error ducimus similique a sed autem culpa blanditiis explicabo
      officiis vel nisi, voluptatem expedita dolores et possimus repellendus reprehenderit facilis
      ad! Quam animi quis fuga deleniti nihil, ipsam neque consectetur tenetur doloribus ab
      veritatis reiciendis ipsum assumenda facere adipisci qui iure, distinctio molestias aspernatur
      sint alias nesciunt esse nam? Expedita quod architecto omnis tempore eaque quo exercitationem
      nulla optio debitis quos porro ipsam minus magni recusandae tenetur cumque officia commodi
      quasi non, sapiente, perferendis eius corporis? Quas tempora ducimus unde! Possimus ea eveniet
      beatae dolore sunt, quae error recusandae maxime! Illo eveniet quod exercitationem fuga quis
      dolorum aperiam repellendus nam, adipisci architecto numquam dolor voluptate laborum
      laboriosam nihil ducimus, suscipit inventore sunt debitis? Reiciendis pariatur laudantium quos
      enim accusamus recusandae est voluptatum autem. Dignissimos harum placeat sapiente mollitia
      excepturi, alias aliquam commodi tempora, aperiam labore voluptates ex autem quaerat neque hic
      fugit cumque magnam, optio nam beatae? Ab?
    </div>
  </body>
</html>
